/**
 * 通用表格
 */

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Table, message, Spin } from 'antd';

import { fetch } from '../../../common/api';
import { getPageData, isObjEmpty, filterEmptyData } from '../../../common/tool';

const CommonTable = (props) => {
    const [loading, setLoading] = useState(false);
    const [tableDate, setTableDate] = useState([]);

    useEffect(() => {
        handleGetData({
            page: 1,
            pageSize: 10,
        });
    }, []);

    const handleGetData = (data) => {
        const { apiPath, apiData, apiMethod } = props;
        setLoading(true);
        const sendData = filterEmptyData({ ...apiData, ...data });
        fetch({ apiPath, apiData: sendData, apiMethod })
            .then((data) => {
                // 判断如果卸载,则不再设置数据
                if (!data.data || !data.data.content) data.data.content = [];
                data.data.content.map((item, inx) => {
                    item.key = inx;
                });
                setLoading(false);
                setTableDate(data.data);
            })
            .catch((err) => {
                setLoading(false);
                message.error(`获取数据失败:${err.message}`);
            });
    };

    const handleChangePage = (page, filters, sorter) => {
        const { sortType } = props;
        let orders = {};
        if (!isObjEmpty(sorter)) {
            sortType.map((item) => {
                if (item.text == sorter.columnKey) {
                    orders = {
                        sortType: item.value,
                        isDesc: sorter.order === 'descend' ? 1 : 0,
                    };
                }
            });
        }
        handleGetData({
            page: page.current,
            pageSize: page.pageSize,
            ...orders,
        });
    };

    const {
        tableTitle,
        columns,
        isShowPagination,
        isShowBordered,
        rightLink,
        rightLinkTitle,
        pageSizeOptions,
        rowKeyFun,
        scroll,
    } = props;
    let pageData;

    if (isShowPagination && pageSizeOptions) {
        pageData = { ...getPageData(tableDate), pageSizeOptions };
    } else pageData = { ...getPageData(tableDate) };

    return (
        <Spin spinning={loading}>
            {tableTitle ? (
                <h3>
                    {tableTitle}
                    {rightLink ? (
                        <a
                            className="right-link pull-right"
                            href={rightLink}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            {rightLinkTitle}
                        </a>
                    ) : null}
                </h3>
            ) : null}
            <Table
                columns={columns}
                bordered={isShowBordered}
                pagination={isShowPagination ? pageData : false}
                dataSource={tableDate.content}
                onChange={handleChangePage}
                rowKey={rowKeyFun}
                scroll={scroll}
            />
        </Spin>
    );
};

CommonTable.propTypes = {
    rightLink: PropTypes.string, // table 右侧链接
    rightLinkTitle: PropTypes.string, // table 右侧链接文案
    tableTitle: PropTypes.string, // table名字
    columns: PropTypes.array.isRequired, // 表格的配置项
    isShowBordered: PropTypes.bool, // table是否带有边框,
    isShowPagination: PropTypes.bool, // table是否展示分页
    apiPath: PropTypes.string.isRequired, // API接口
    apiData: PropTypes.object, // api请求附加的数据
    apiMethod: PropTypes.string, // api请求method,
    sortType: PropTypes.array, // table排序类型 [{ text: 'sortName', value: 'sortValue'}],
    pageSizeOptions: PropTypes.array,
    rowKeyFun: PropTypes.func,
    scroll: PropTypes.object,
};
CommonTable.defaultProps = {
    isShowBordered: true,
};
export default CommonTable;
